﻿
<!doctype html>
<html lang="en-au">
<head>
    <title>jQuery.Gantt</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
    <link rel="stylesheet" href="css/style.css" />
    <!--<link rel="stylesheet" href="css/bootstrap.css" />-->
    <!--<link rel="stylesheet" href="css/prettify.css" />-->
    <style type="text/css">
        body {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 13px;
            padding: 0 0 50px 0;
        }

        .contain {
            width: 800px;
            margin: 0 auto;
        }

        h1 {
            margin: 40px 0 20px 0;
        }

        h2 {
            font-size: 1.5em;
            padding-bottom: 3px;
            border-bottom: 1px solid #DDD;
            margin-top: 50px;
            margin-bottom: 25px;
        }

        table th:first-child {
            width: 150px;
        }
    </style>
</head>
<body>

    <div class="gantt"></div>

</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>
<!--<script src="js/bootstrap-tooltip.js"></script>-->
<!--<script src="js/bootstrap-popover.js"></script>-->
<!--<script src="js/prettify.js"></script>-->
<script>

		$(function() {

			"use strict";

			$(".gantt").gantt({
			    source: [//数据源：json数组或者返回json的url地址
                    {
                        name: "task  1",//每一行最左侧的一列以粗体显示
                        desc: "描述",//每一行左侧第二列
                        values: [{//甘特图日期范围项
                            from: "/Date(1320192000000)/",
                            to: "/Date(1322401600000)/",
                            desc: "part one",//鼠标悬停
                            label: "part one",//甘特显示文本
                            customClass: "ganttRed",//甘特自定义class,改变颜色
                        }]
                    }, {
                        name: "task  2",
                        desc: "part two",
                        values: [{
                            from: "/Date(1322611200000)/",
                            to: "/Date(1323302400000)/",
                            desc: "change module",
                            label: "change module",
                            customClass: "ganttRed"
                        }]
                    }, {
                        name: "task  3",
                        desc: "part there",
                        values: [{
                            from: "/Date(1323802400000)/",
                            to: "/Date(1325685200000)/",
                            label: "",
                            customClass: "ganttGreen"
                        }]
                    }, {
                        name: "task  4",
                        desc: "",
                        values: [{
                            from: "/Date(1325685200000)/",
                            to: "/Date(1325695200000)/",
                            label: "",
                            customClass: "ganttBlue"
                        }]
                    }, {
                        name: "task  5",
                        desc: "",
                        values: [{
                            from: "/Date(1326785200000)/",
                            to: "/Date(1325785200000)/",
                            label: "",
                            customClass: "ganttGreen"
                        }]
                    }, {
                        name: "task  6",
                        desc: "",
                        values: [{
                            from: "/Date(1328785200000)/",
                            to: "/Date(1328905200000)/",
                            label: "",
                            customClass: "ganttBlue"
                        }]
                    }, {
                        name: "task  7",
                        desc: "",
                        values: [{
                            from: "/Date(1330011200000)/",
                            to: "/Date(1336611200000)/",
                            label: "",
                            customClass: "ganttOrange"
                        }]
                    }, {
                        name: "task  8",
                        desc: "",
                        values: [{
                            from: "/Date(1336611200000)/",
                            to: "/Date(1338711200000)/",
                            label: "",
                            customClass: "ganttOrange"
                        }]
                    },

                    {
					name: "more",
					desc: "",
					values: [
                    {
                        from: "/Date(1322611200000)/",
                        to: "/Date(1323302400000)/",
					    label: "",
					    customClass: "ganttBlue"
                    },
                    {
                        from: "/Date(1323802400000)/",
                        to: "/Date(1325685200000)/",
                        label: "",
                        customClass: "ganttOrange"
                    },
                    {
                        from: "/Date(1328785200000)/",
                        to: "/Date(1328905200000)/",
                        label: "",
                        customClass: "ganttGreen"
                    },



					]
				}],
				navigate: 'scroll',//导航类型：按钮和滚动条 buttons/scroll
				scale: "weeks",// months days  weeks//显示单元
				maxScale: "months",//视图缩放最大单元
				minScale: "days",//视图缩放最小单元
                months:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],//月份对应的显示字符
//                dow:["S", "M", "T", "W", "T", "F", "S"],//周日到周一的显示字符
                waitText:"Data loading .......",//在数据加载是提示信息
                scrollToToday:true, //是否滚动到当天
				itemsPerPage: 10,//每页显示项目数
                //点击时执行的操作，参数是被点击项目相关联的数据对象
				onItemClick: function(data) {
					alert("Item clicked - show some details");
				},
                //在空白格子点击时执行的函数第一个参数是点击点对应时间的毫秒数，第二个参数对象的id
				onAddClick: function(dt, rowId) {
					alert("Empty space clicked - add an item!");
				},
                //甘特图渲染完毕后执行的操作
				onRender: function() {
					if (window.console && typeof console.log === "function") {
						console.log("chart rendered");
					}
				},
//                useCookie:true, //声明是是否使用cookie记录图表的状态（缩放单元、滚动条位置）需要使用jquery.cookie.js才能使用该选项
			});

			$(".gantt").popover({
				selector: ".bar",
				title: "I'm a popover",
				content: "And I'm the content of said popover."
			});

			prettyPrint();

		});

</script>

</html>